<template>
  <div class="content">
    <h2>我是App组件</h2>
    <!--对应template中的ref对象,会自动解包,不用手动解包counter.value, 手动解包反而无效-->
    <h2>当前计数: {{counter}}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script>
  import { ref } from 'vue'
  import useCounter from './hooks/useCounter'
  export default {
    setup() {
      // 1. 默认定义的数据都不是响应式的
      // const counter = 0 // 使用const会导致数据无法修改,切会报错,所以使用let
      /*
      let counter = ref(0)
      const increment = () => {
        counter.value++
        console.log(counter.value)
      }
      const decrement = () => {
        counter.value--
      }
      */
     // 方式一: 使用解构赋值
      // const { counter, increment, decrement } = useCounter()

      // return {
      //   counter,
      //   increment,
      //   decrement
      // }
      // 方式二: 使用扩展运算符
      return {...useCounter()}
    }
  }
</script>

<style scoped>
</style>./01_setup函数的体验/hooks/useCounter